<!-- 
<TabBlue :tabs="['设备列表']" :activeTab.sync="activeTab">
	<div slot="TabColContent" class="TabColContent"></div>
</TabBlue>
 -->
<template>
	<div class="TabBlue">
		<el-tabs v-model="activeTab" type="card" @tab-click="handleClick">
		    <el-tab-pane :label="item" :name="index + 1 + ''" v-for="(item,index) in tabs" :key="index">
		        <slot name="TabColContent"></slot>
		    </el-tab-pane>
		</el-tabs>
	</div>
</template>
<script>
	export default {
		props: {
			activeTab: {
				type: String,
				default: '0'
			},
			tabs: {
				type: Array,
				default() {
					return ['tab1','tab2']
				}
			},
		},
		methods: {
			handleClick() {
				this.$emit('handleClick')
				this.$emit('update:activeTab', this.activeTab)
			}
		}
	}
</script>
<style>
	.TabBlue .el-tabs--card>.el-tabs__header {
	    border-bottom: 1px solid rgba(42, 88, 173, .5);
	}

	.TabBlue .el-tabs--card>.el-tabs__header .el-tabs__item {
	    background-color: #fff;
	    color: rgba(42, 88, 173, 1);
	    border-top-left-radius: 3px;
	    border-top-right-radius: 3px;
	    border-bottom: 1px solid rgba(42, 88, 173, .5);
	}

	.TabBlue .el-tabs--card>.el-tabs__header .el-tabs__item.is-active {
	    background-color: rgba(42, 88, 173, 1);
	    color: #fff;
	    box-sizing: border-box;
	}

	.TabBlue .el-tabs__header {
	    margin: 0;
	}

	/*.TabBlue .el-collapse .el-collapse-item {
	    background-color: #fff;
	    margin-bottom: 10px;
	    padding-left: 10px;
	    padding-right: 10px;
	    border: 1px solid #E9EEF3;
	    border-top: none;
	}

	.TabBlue .el-collapse {
	    border: none;
	}

	.TabBlue .el-collapse .el-collapse-item .el-collapse-item__header {
	    color: #f88976;
	    font-size: 17px;
	}

	.TabBlue .el-collapse .el-collapse-item .el-collapse-item__wrap {
	    border: none;
	}*/
</style>